<template>
    <div class="LoginView">
        <div class="header">
            <div class="head">
                <div class="wrong" @click="wrong">
                    <svg t="1668514230260" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4112" width="200" height="200">
                        <path
                            d="M806.4 263.2l-45.6-45.6L512 467.2 263.2 217.6l-45.6 45.6L467.2 512 217.6 760.8l45.6 45.6L512 557.6l248.8 248.8 45.6-45.6L557.6 512z"
                            p-id="4113"></path>
                    </svg>
                </div>

                登录

            </div>
        </div>


        <div class="Receivebox">
            <div>
                藏书馆大家庭欢迎你加入
            </div>
        </div>

        <div class="inputbox">
            <div class="box">
                <input style="width:90%" type="text" placeholder="请输入手机号" v-model="phone"/>
            </div>


            <div class="box">
                <input style="width:90%" type="password" placeholder="请输入密码" v-model="password"/>
            </div>

        </div>

        <div class="login-enroll">
            <div ref="login" class="lo-en" @click="getCode">
                登录
            </div>

            <div class="lo-en con">
                注册
            </div>

            <p>忘记密码</p>

        </div>


        <div class="imgbox">
            <div class="img">
                <img src="../assets/登录页面.png" alt="">
            </div>

        </div>
    </div>
</template>

<script>
// import {getLoginCellphone} from "../api/login.js"
export default {

    data() {
        return {
    
            phone: "",
            password: "",
            lists:[],
      
        }
    },
    methods: {

        //返回
        wrong(){
            this.$router.go(-1)
        },



        getCode() {
            //1.验证手机号码
            // console.log(this)
            // let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

            // // 2.验证密码
            // let pass = /^[a-zA-Z]\w{5,17}$/;

            // if (!reg.test(this.phone) || !pass.test(this.password)) {
            //     this.$toast("请输入正确的手机号码");
            //     console.log("")
            //     return;
            // }else{
            //     this.$refs.login.style.background="#FF7F27"
            // }





               // 1.验证手机号码
               let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                // 2.验证密码
                let pass = /^[a-zA-Z0-9]\w{8,17}$/;
                // 3.验证码
                // let code = /^[0-9]{4}$/;
                if(!reg.test(this.phone) || !pass.test(this.password)  ){//不正确处理
                    this.$toast("请输入正确手机号码与密码");
                    return;
                }
                // if(!code.test(this.code)){//不正确处理
                //     this.$toast("请输入正确手机号码与密码");
                //     return;
                // }

                console.log("成功");
                // getLoginCellphone({phone:this.phone,password:this.password}).then(data=>{
                //     console.log("验证码验证==>",data);
                //     if(!data.data){//失败提示
                //         this.$toast("请输入正确手机号码与密码");
                //         return;
                //     }

                //  window.localStorage.setItem("token","token值");
                        window.localStorage.setItem("number",this.phone);
                        this.$toast("登陆成功");
                        // this.$router.push("/userinfo");
                              this.$router.push("/MineView");
















     



        //     getLoginCellphone({phone:this.phone,password:this.password}).then(
        //         (data)=>{
        //             console.log("data",data)

        //             this.lists.push(data)
        //             console.log(this.lists)

        // //             if (this.phone in data) {
        // //     console.log(data[this.phone]);
            
        // //     if (this.password == data[this.phone].password) {
        // //       console.log("成功登录");
        // //       window.localStorage.setItem("number", this.phone);
        // //     //   this.$router.push("/MineView");
        // //     } else {
        // //       this.$toast("请输入正确手机号码与密码");
        // //     }
        // //   } else {
        // //     // console.log("不存在");
        // //     window.localStorage.setItem("number", this.phone);
        // //   }
        //         }
        //     )

        }
    }
}
</script>

<style lang="scss" scoped>
.LoginView {

    .header {
        padding: 10px 10px 26px 10px;
        background-color: #fff;

        .head {

            color: #09172f;
            font-size: 20px;
            text-align: center;
            position: relative;

            .wrong {
                position: absolute;
                top: 4px;

                .icon {
                    width: 20px;
                    height: 20px;
                }
            }

        }
    }

    .Receivebox {
        font-size: 20px;
        font-weight: bold;
        color: #000;
        text-align: center;
        margin-bottom: 24px;
        padding-top: 20px;
    }

    .inputbox {
        padding: 10px 20px;

        .box {
            display: flex;
            // width: 100%;
            padding-bottom: 16px;
            padding-top: 16px;
            padding-left: 20px;
            border: 2px solid #e9e9e9;
            margin-bottom: 14px;
            border-radius: 20px;

            input {
                background: none;
                outline: none;
                border: 0px;
                font-size: 14px;
            }
        }
    }

    .login-enroll {
        padding: 0px 20px;
        margin-bottom: 40px;

        .lo-en {
            padding-bottom: 16px;
            padding-top: 16px;
            border-radius: 20px;
            text-align: center;
            background-color: #f0a394;
            margin-bottom: 14px;
            color: #fff;
        }

        .con {
            background: none;
            border: 2px solid #fff;
            color: #000;
        }

        p {
            color: #7d7d7d;
            font-size: 12px;
        }
    }

    .imgbox {
        display: flex;
        justify-content: space-around;

        .img {
            img {
                width: 100px;
                height: 100px;
            }
        }
    }
}
</style>